<template>
  <div class="m-addtion">
    <ul class="nav-wrapper">
      <li class="item0 change-border"><a class="change-color" href="">商品亮点</a></li>
      <li class="item1"><a href="">行程安排</a></li>
      <li class="item2"><a href="">费用说明</a></li>
      <li class="item3"><a href="">预定须知</a></li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: 'm-addition',
    data () {
      return {
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .m-nav{
    width: 100%;
    height: 10vw;
    background-color: #FFF;
    border-bottom: 1px solid #D7D7D7;
    border-top: 1px solid #D7D7D7;
    font-size: 4rem;
    position: relative;
  }
  ul{
    width: 100%;
    height: 100%;
  }
  ul,li{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  ul>li{
    display: inline-block;
    /*解决display：inline基线引起的不再一个水平线的问题*/
    vertical-align: center;
    width: 20.48%;
    /*height: 100%;*/
    padding-bottom: 2%;
    padding-left: 3.5%;
    /*color: #333;*/
    margin-top:2%;
    /*margin-bottom: 2%;*/
  }
  a{
    text-decoration: none;
    color: #333;
  }
  .change-color{
    color: #FF6633;
  }
  .change-border{
    border-bottom: 4px solid #FF6633;
  }
</style>
